<script setup lang="ts"></script>

<template>
  <div class="image-container">
    <h1>图片详情</h1>
    <p>查看和管理图片的详细信息。</p>

    <div class="image-demo">
      <div class="input-section">
        <textarea
          placeholder="请描述您想要生成的图像，例如：一只可爱的小猫坐在花园里..."
          class="prompt-input"
        ></textarea>
        <button class="generate-btn">生成图像</button>
      </div>

      <div class="result-section">
        <h3>生成结果</h3>
        <div class="image-placeholder">
          <span class="placeholder-text">图像将在这里显示</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.image-container {
  h1 {
    color: #2c3e50;
    margin-bottom: 20px;
  }

  p {
    color: #6c757d;
    margin-bottom: 30px;
  }

  .image-demo {
    .input-section {
      margin-bottom: 30px;

      .prompt-input {
        width: 100%;
        min-height: 100px;
        padding: 15px;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        font-size: 14px;
        resize: vertical;
        margin-bottom: 15px;

        &:focus {
          outline: none;
          border-color: #007bff;
        }
      }

      .generate-btn {
        background: #007bff;
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.3s ease;

        &:hover {
          background: #0056b3;
        }
      }
    }

    .result-section {
      h3 {
        color: #2c3e50;
        margin-bottom: 15px;
      }

      .image-placeholder {
        width: 100%;
        height: 300px;
        background: #f8f9fa;
        border: 2px dashed #dee2e6;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;

        .placeholder-text {
          color: #6c757d;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
